<template>
  <div class="cms-article-tags pl-4" :class="`style_${type}`">
    <span v-for="item in novelType" :key="item" class="mr-[11px] px-4 py-1 text-xs">{{ item }}</span>
  </div>
</template>

<script setup lang="ts">
import { withDefaults } from 'vue'

const props = withDefaults(defineProps<{ type: number }>(), { type: 1 })

const novelType = ['爽文', '热血', '仙侠', '武侠', '玄幻']
</script>

<style scoped lang="less">
.cms-article-tags {
  &.style_1 {
    span {
      @apply bg-white rounded text-[#ff613f];
      border: 1px solid #ff613f;
    }
  }
  &.style_2 {
    span {
      @apply bg-[#ffefeb]  text-[#ff613f] rounded;
    }
  }
  &.style_3 {
    span {
      @apply text-white bg-[#FF613F] rounded-xl;
    }
  }
}
</style>
